<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(function(){
        loadList();
    })

    function loadList() {
        $.ajax({
            url: "/resume/list",
            contentType: "application/json;encoding=utf-8",
            dataType: "json",
            data: {},
            success: function (result) {
                if (result.code == 1) {
                    $("#list").empty();
                    var list = result.data;
                    for (let x in list) {
                        var tr = "<tr id='resume" + list[x].id + "'><td>" + list[x].id + "</td>"
                        tr = tr + "<td>" + list[x].name + "</td>";
                        tr = tr + "<td>" + list[x].phone + "</td>";
                        tr = tr + "<td>" + list[x].address + "</td>";
                        tr = tr + "<td><button class='btn btn-info' type='button' data-toggle=\"modal\" data-target=\"#myModal\" onclick='updateDialog(" + list[x].id + ")'>修改</button>"
                        tr = tr + "<button class='btn btn-info' type='button' onclick='deleteResume(" + list[x].id + ")'>删除</button></td>"
                        tr = tr + "</tr>";
                        $("#list").append(tr);
                    }

                } else {
                    alert(result.msg);
                }
            }
        });
    }

    function updateDialog(id){
        let tdArr = $("#resume"+id).find("td");
        $("#id").val(tdArr[0].innerText);
        $("#name").val(tdArr[1].innerText);
        $("#phone").val(tdArr[2].innerText);
        $("#address").val(tdArr[3].innerText);
        $("#edit").css("display","");
        $("#add").css("display","none")
    }
    function addDialog(){
        $("#id").val("");
        $("#name").val("");
        $("#phone").val("");
        $("#address").val("");
        $("#edit").css("display","none");
        $("#add").css("display","")
    }

    function addResume(){
        $.ajax({
            url: "/resume/add",
            contentType: "application/json;encoding=utf-8",
            dataType: "json",
            data: {
                "id":$("#id").val(),
                "name":$("#name").val(),
                "phone":$("#phone").val(),
                "address":$("#address").val(),
            },
            success: function (result) {
                if (result.code == 1) {
                    $("#closeBtn").click();
                    loadList();
                } else {
                    alert(result.msg);
                }
            }
        });
    }

    function updateResume(){
        $.ajax({
            url: "/resume/update",
            contentType: "application/json;encoding=utf-8",
            dataType: "json",
            data: {
                "id":$("#id").val(),
                "name":$("#name").val(),
                "phone":$("#phone").val(),
                "address":$("#address").val(),
            },
            success: function (result) {
                if (result.code == 1) {
                    $("#closeBtn").click();
                    loadList();
                } else {
                    alert(result.msg);
                }
            }
        });
    }

    function deleteResume(id){
        $.ajax({
            url: "/resume/delete",
            contentType: "application/json;encoding=utf-8",
            dataType: "json",
            data: {
                "id":id
            },
            success: function (result) {
                if (result.code == 1) {
                    $("#closeBtn").click();
                    loadList();
                } else {
                    alert(result.msg);
                }
            }
        });
    }

</script>
<body>
<div class="container-fluid">
    <div class="row-fluid" align="center">
        <h2>简历信息</h2>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid"/>
            <button class="btn btn-info btn-large" type="button"  data-toggle="modal" data-target="#myModal" onclick="addDialog()">新增</button>
            <button class="btn btn-info btn-large" type="button">查询</button>
        </div>
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>
                    编号
                </th>
                <th>
                    姓名
                </th>
                <th>
                    电话
                </th>
                <th>
                    地址
                </th>

                <th>
                    操作
                </th>
            </tr>
            </thead>
            <tbody id="list">
            </tbody>
        </table>
    </div>
</div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel" id="option" onclick="addDialog()">
                    新增
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <input id="id" hidden/>
                    <div class="control-group">
                        <label class="control-label" for="name">用户名</label>
                        <div class="controls">
                            <input id="name" type="text" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="phone">电话</label>
                        <div class="controls">
                            <input id="phone" type="text" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="address">地址</label>
                        <div class="controls">
                            <input id="address" type="text" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="edit" class="btn btn-primary" onclick="updateResume()">
                    修改
                </button>
                <button type="button" id="add" class="btn btn-primary" onclick="addResume()">
                    新增
                </button>
                <button type="button" id="closeBtn" class="btn btn-default" data-dismiss="modal">关闭</button>

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
